<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <link type="text/css" rel="stylesheet" href="js/jedate/css/jedate.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jedate/js/jedate.js"></script>
    <script src="js/tinymce/js/tinymce/tinymce.min.js"></script>
    <script src="js/tinymce/js/tinymce_setup.js"></script>
</head>
<style>
    .preview {
        width: 100px;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="common_title">
            写文章
        </div>
        <div class="container-fluid common_con">
            <form class="form-horizontal article_form">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章标题：</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" name="title" placeholder="文章标题">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">文章封面：</label>
                    <div class="col-sm-10">
                        <img src="" alt="" class="preview">
                        <input type="file" id="exampleInputFile" name="cover">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章类别：</label>
                    <div class="col-sm-4">
                        <select class="form-control" name="type">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">发布时间：</label>
                    <div class="col-sm-4">

                        <div class="input-group">
                            <input type="text" class="form-control" name="date" placeholder="YYYY-MM-DD" id="dateinput">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"
                                    onclick="jeDate('#dateinput',{trigger:false,format: 'YYYY-MM-DD'})"><i
                                        class="iconfont icon-icondate"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章内容：</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="rich_content" name="content" placeholder="文章内容">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda fugiat illo nihil molestias ab. Laborum eius non atque, totam sapiente quae obcaecati assumenda ratione inventore pariatur maiores, qui libero delectus.
                            </textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-success btn-publish">发布</button>
                        <button type="submit" class="btn btn-default">存为草稿</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</body>

<script src="./js/template-web.js"></script>

<script type="text/html" id="cate">
    {{each data v}}
    <option value="{{v.id}}">{{v.name}}</option>
    {{/each}}
</script>


<script>
    /*
    http://localhost:8000/admin/article_publish
    步骤:
    1.图片预览
        通过img标签
        files[0] 获取到上传的文件对象信息
        url路径 URL.createObjectUrl
        将路径设置给img得src
    2.文章类型处理
        http://localhost:8000/admin/category_search
        ajax请求类别数据
    3.发布按钮点击事件
        http://localhost:8000/admin/article_publish
     */

    $(function () {
        //图片预览
      $('#exampleInputFile').change(function () {
        var file = this.files[0]
        var url = URL.createObjectURL(file)
        $(this).prev('img').attr('src',url)
      })

      $.ajax({
        url:'http://localhost:8000/admin/category_search',
        success:function (backData) {
            $('select').html(template('cate',backData))
        }
      })

      //发布文章
      $('.btn-publish').click(function (e) {
        e.preventDefault()
        //formData
        var formData = new FormData($('form')[0])
        //formata 可以追加
        formData.append('content',tinyMCE.activeEditor.getContent())
        formData.append('state','已发布')

        $.ajax({
          url:'http://localhost:8000/admin/article_publish',
          type:'post',
          data:formData,
          contentType:false,
          processData:false,
          success:function (backData) {
            console.log(backData)
          }
        })
      })

    })
</script>
</html>

















